<template>
  <a-modal
    title='导入数据'
    :width='640'
    :visible='visible'
    :confirmLoading='loading'
    @ok='handleSubmitUpload'
    @cancel="() => { $emit('close') }"
  >
    <a-spin :spinning='loading'>
      <a-alert
        message='提示'
        type='warning'
        show-icon
      >
        <p slot='description'>
          请使用对应模板进行数据导入(<a @click='handleDownloadTemplate'>点击下载</a>)、否则会导致数据导入失败！
        </p>
      </a-alert>

      <div style='padding-top: 20px'>
        <a-upload-dragger
          name='file'
          :remove='handleRemove'
          accept=".xlsx"
          :before-upload='beforeUpload'
          :file-list='fileList'
          :multiple='true'
          action='https://www.mocky.io/v2/5cc8019d300000980a055e76'
        >
          <p class='ant-upload-drag-icon'>
            <a-icon type='upload' />
          </p>
          <p class='ant-upload-text'>
            点击或拖动到此处上传文件
          </p>
          <p class='ant-upload-hint'>
            仅支持单次上传Excel文件。严禁上传公司资料或其他 版权文件
          </p>
        </a-upload-dragger>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
// import pick from 'lodash.pick'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    importFileFun: {
      type: Function
    },
    //  形如 money/电气系统资产设备模板.xlsx
    templatePath: {
      type: String
    },
    // query params 如果无忽略即可
    importParams: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      fileList: [],
      form: this.$form.createForm(this)
    }
  },
  watch: {
    visible() {
      this.fileList = []
    }
  },
  methods: {
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file]
      if (this.fileList.length > 1) {
        this.$message.warning('数据导入只能上传一个文件!')
      }
      return false
    },
    handleDownloadTemplate(event) {
      event.preventDefault()
      event.stopPropagation()
      const CURRENT_HOST = window.location.origin
      // console.log(window.location + 'template/money/电气系统资产设备模板.xlsx', 'window.locationwindow.locationwindow.location')
      window.open(CURRENT_HOST + '/template/' + this.templatePath, '_self')
    },
    handleSubmitUpload() {
      const { fileList } = this
      if (!fileList || !fileList.length) {
        this.$message.warning('请选择文件后上传!')
        return
      }
      if (fileList.length > 1) {
        this.$message.warning('数据导入只能上传一个文件!')
        return
      }
      const formData = new FormData()
      fileList.forEach(file => {
        formData.append('file', file)
      })
      this.importFileFun(formData, this.importParams || {}).then(res => {
        console.log(res)
        this.fileList = []
        this.$message.success('导入成功')
        this.$emit('close')
        this.$emit('refsh')
      })
    }
  },
  created() {
    // // 防止表单未注册
    // fields.forEach(v => this.form.getFieldDecorator(v))
    //
    // // 当 model 发生改变时，为表单设置值
    // this.$watch('model', () => {
    //   this.model && this.form.setFieldsValue(pick(this.model, fields))
    // })
  }
}
</script>
